<template>
	<view class="content">
		<view style="text-align: center; margin-top: 50rpx;">
			<h2>广西钢铁工会会员生日蛋糕券：</h2>
		</view>
		<!-- 头部改成说明 -->
		<view class="top">
			<view class="dis">
				<view v-for="(item, idx) in list">
					<view class="item">
						<view :class="this_index==item.id?'yes':'no'" @tap="type(item.id)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="shuoming" v-if="this_index == 0">
				1、点击<text style="color: red; font-weight: bold; margin: 0 9rpx;">粉红色</text>按钮选择。
				<br />
				2、<text style="color: red; margin-right: 12rpx;">请注意:</text>每位职工只能选择一次，确定后不可更改！
			</view>
			<view class="shuoming" v-if="this_index == 1">
				1、选择 “柳州卡” 的职工，只可在<text style="color: red; margin: 0 12rpx;">“喜莲娜蛋糕店”</text>或<text
					style="color: red; margin: 0 12rpx;">“深航深航爱伦斯蒂蛋糕店”</text>的各网点使用。
				<br />
				2、选择 “防城港卡” 的职工，只可在<text style="color: red; margin: 0 12rpx;">“维德糕点店”</text>的各网点使用。
			</view>
		</view>

		<view style="width: 90%; margin: 0 auto; margin-top: 40rpx; padding-bottom: 50rpx;">
			<view class="" v-for="(item, idx) in cake">
				<view class="forr">
					<h2>{{item.name}}</h2>
					<view class="xuanze" v-if="is_Show == 1" @click="select(item)">{{item.use}}</view>
				</view>
				<image class="tu" :src="item.img" mode=""></image>
				<view style="display: flex; align-items: center;">
					<image style="width: 45rpx; height: 45rpx;" class="" src="../../static/card/icon.png" mode="">
					</image>
					<view style="margin-left: 10rpx; width: 90%;">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: null,
				is_Show: 0,
				ticket: null,
				type_index: '2024',
				this_index: 0,
				cake: [{
					name: '柳州卡',
					use: '在柳州使用',
					text: '使用范围: 喜莲娜蛋糕店各网点、深航爱伦斯蒂蛋糕店各网点',
					img: '../../static/card/dg1.jpg',
					type: 'A'
				}, {
					name: '防城港卡',
					use: '在防城港使用',
					text: '使用范围: 维德糕点店各网点',
					img: '../../static/card/dg2.jpg',
					type: 'B'
				}, ],
				list: [{
						id: 0,
						name: '选择说明'
					},
					{
						id: 1,
						name: '使用说明'
					}
				],
			}
		},
		onLoad(opt) {
			if (opt.type) {
				this.type_index = opt.type
			}
			this.user = uni.getStorageSync("member");
			console.log('type: ', this.type_index);
			this.get_card();
		},
		methods: {
			get_card() {
				let self = this
				// 查2024年券
				uni.showLoading({
					title: '加载中...'
				});
				let url_2024 = '/app/wallet_log'
				let parm_2024 = {
					type: '2024年广西钢铁工会会员生日蛋糕券',
					money: 0.00,
				}
				this.$boya.NPost(url_2024, parm_2024, function(res) {
					console.log('有2024年券：', res);
					self.ticket = '2024'
					self.is_Show++
					uni.hideLoading();
				}, err => {
					uni.showLoading({
						title: '加载中...'
					});
					// 查2025年旧券
					self.$boya.Request({
						url: '/card_availability',
						data: {
							uuid: self.user.uuid,
							card_name: "2025年广西钢铁工会会员生日蛋糕券选择券",
						}
					}, function(res) {
						if (res.code == 200 && res.data.status == 1) {
							// res.data.status为1：已审核通过
							// res.data.status为-1：审核不通过通过
							// res.data.status为0：未审核
							// res.data.status为2：已选取
							console.log('有2025年旧券：', res.data);
							self.ticket = '2025'
							self.is_Show++
							uni.hideLoading();
						} else {
							// 查2025年新券
							self.$boya.Request({
								url: '/card_availability',
								data: {
									uuid: self.user.uuid,
									card_name: "2025年广西钢铁工会会员生日蛋糕券选择券(新)",
								}
							}, function(res) {
								if (res.code == 200 && res.data.status == 1) {
									// res.data.status为1：已审核通过
									// res.data.status为-1：审核不通过通过
									// res.data.status为0：未审核
									// res.data.status为2：已选取
									console.log('有2025年新券：', res.data);
									self.ticket = '2025'
									self.is_Show++
									uni.hideLoading();
								} else {
									uni.showToast({
										icon: 'error',
										title: res.data
									});
								}
							}, false)
						}
					}, false)
				}, false, false)
			},
			// 更换list类型
			type(id) {
				this.this_index = id
			},
			// 是否确定选择该方案
			select(item) {
				let self = this
				self.is_Show--
				console.log('type: ', item.type);
				if (self.ticket == null) {
					uni.showModal({
						title: '提示！',
						content: '该账号已选择或无选择券，请刷新或重进券包页面',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					});
				} else {
					uni.showModal({
						title: '只可选择一次！',
						content: '您确定选择 ' + item.use + ' 该券吗？选择后不可更改！',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								});
								self.confirm(item.type, item.use)
							} else if (res.cancel) {
								self.$boya.msg('您已取消选择')
								self.is_Show++
							}
						}
					});
				}
			},
			// 确定选择该方案
			confirm(type, use) {
				let self = this
				let data = {
					type: type
				};
				if (self.type_index == '2024') {
					console.log('走到2024这里');
					self.$boya.NPost('/app/exchange_coupon', data, function(res) {
						console.log('res: ', res);
						if (res.code == 200) {
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: '选择成功，您已选择 ' + use + '该券',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack();
									}
								}
							});
						}
					});
				} else if (self.type_index == '2025') {
					console.log('走到2025这里');
					let url = '/app/wallet_add'
					let name = null
					let price = '0'
					if (type == 'A') { // 柳州卡
						name = '2025年广西钢铁工会会员生日蛋糕券·柳州卡'
						price = '232'
					} else if (type == 'B') { // 防城港卡
						name = '2025年广西钢铁工会会员生日蛋糕券·防城港卡'
						price = '220'
					}
					let parm = {
						type: name,
						money: price,
					}
					self.$boya.NPost(url, parm, function(res) {
						console.log("wallet_add", res);
						// 删除选择券
						let urlRemove = '/app/wallet_status_update'
						let parmRemove = {
							type: '2025年广西钢铁工会会员生日蛋糕券选择券',
							money: '0.00',
						}
						self.$boya.NPost(urlRemove, parmRemove, function(res) {
							console.log("Remove", res);
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: '选择成功，您已选择 ' + use + '该券',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack();
									}
								}
							});
						}, function(err) {
							console.log('删除选择券err: ', err);
						})
					}, function(err) {
						console.log('创建优惠券err: ', err);
					})
				}
			}
		}
	}
</script>

<style>
	.content {
		background: url('../../static/card/bj1.png') 100% 100% / 100% 100%;
		/* background-color: #FAF7EF; */
		/* background: linear-gradient(to right, #F9BC43, #FBD898); */
	}

	.top {
		width: 90vw;
		margin: 0 auto;
		margin-top: 40rpx;
		border: 1px solid black;
		/* height: 200rpx; */
		border-radius: 25rpx;
	}

	.dis {
		display: flex;
	}

	.item>view {
		width: 45vw;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 25rpx;
	}

	.shuoming {
		margin: 20rpx 25rpx;
	}

	.yes {
		color: white;
		background-color: #EC7E85;
	}

	.zuo {
		width: 38%;
		height: 384rpx;
	}

	.you {
		width: 52%;
		height: 180rpx;
	}

	.zi {
		position: absolute;
		z-index: 99;
		margin-top: 40rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}

	.forr {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.xuanze {
		color: white;
		font-size: 28rpx;
		width: 200rpx;
		text-align: center;
		height: 68rpx;
		line-height: 68rpx;
		background-color: #EC7E85;
		/* box-shadow: 3px 3px 6px #c6c6c6; */
		border-radius: 50rpx;
	}

	.tu {
		width: 90%;
		height: 400rpx;
		border-radius: 40rpx;
		margin: 25rpx 33rpx;
	}
</style>